<!DOCTYPE html>
<html lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>小型购物商城</title>
    <meta charset="UTF-8">
    <meta name="description" content="The Plaza eCommerce Template">
    <meta name="keywords" content="plaza, eCommerce, creative, html">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Favicon -->
    <link href="/asserts/img/favicon.ico" rel="shortcut icon"/>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="/asserts/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/asserts/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/asserts/css/owl.carousel.css"/>
    <link rel="stylesheet" href="/asserts/css/style.css"/>
    <link rel="stylesheet" href="/asserts/css/animate.css"/>


    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
<!-- Page Preloder -->
<div id="preloder">
    <div class="loader"></div>
</div>

<!-- Header section -->
<header class="header-section header-normal">
    <div class="container-fluid">
        <!-- logo -->
        <div class="site-logo">
            <img src="/asserts/img/logo.png" alt="logo">
        </div>
        <!-- responsive -->
        <div class="nav-switch">
            <i class="fa fa-bars"></i>
        </div>
        <div class="header-right">
            <a href="car" class="card-bag"><img src="/asserts/img/icons/bag.png" alt=""><a style="color: purple;" >购物车</a></a>

        </div>
        <!-- site menu -->
        <ul class="main-menu">
            <li><a href="resign">返回登录</a></li>
            <li><a href="index">商城首页</a></li>
            <li><a href="product">商品细节</a></li>
            <li><a href="checkout">结账</a></li>
            <li><a href="categorie">商品总览</a></li>
            <li><a href="contact">联系我们</a></li>
            <li><a href="chanpwd">修改密码</a></li>
        </ul>
    </div>
</header>
<!-- Header section end -->


<!-- Page Info -->
<div class="page-info-section page-info-big">
    <div class="container">
        <h2>商品总览</h2>
        <div class="site-breadcrumb">
            <a href="index">Home</a> /
            <span>商品总览</span>/
            <span>Sports鞋</span>
        </div>
        <img src="/asserts/img/plmm.jpg" alt="" class="cata-top-pic">
    </div>
</div>
<!-- Page Info end -->


<!-- Page -->
<div class="page-area categorie-page spad">
    <div class="container">
        <div class="categorie-filter-warp">
            <p>展示12个商品</p>
            <div class="cf-right">
                <div class="cf-layouts">
                    <a href="#"><img src="/asserts/img/icons/layout-1.png" alt=""></a>
                    <a class="active" href="#"><img src="/asserts/img/icons/layout-2.png" alt=""></a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3">
                <div class="product-item">
                    <figure>
                        <img src="/asserts/img/products/shoes/1.jpg" alt="">
                        <div class="pi-meta">
                            <div class="pi-m-left">
                                <img src="/asserts/img/icons/eye.png" alt="">
                                <p></p>
                            </div>
                            <div class="pi-m-right">
                                <img src="/asserts/img/icons/heart.png" alt="">
                                <p></p>
                            </div>
                        </div>
                    </figure>
                    <div class="product-info">
                        <h6>Nike橙色跑鞋</h6>
                        <p>$120</p>
                        <a th:href="@{addToCart(index=25)}" class="site-btn btn-line">置入购物车</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="product-item">
                    <figure>
                        <img src="/asserts/img/products/shoes/2.jpg" alt="">
                        <div class="bache">NEW</div>
                        <div class="pi-meta">
                            <div class="pi-m-left">
                                <img src="/asserts/img/icons/eye.png" alt="">
                                <p></p>
                            </div>
                            <div class="pi-m-right">
                                <img src="/asserts/img/icons/heart.png" alt="">
                                <p></p>
                            </div>
                        </div>
                    </figure>
                    <div class="product-info">
                        <h6>Nike Air Max 2090</h6>
                        <p>$135</p>
                        <a th:href="@{addToCart(index=26)}" class="site-btn btn-line">置入购物车</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="product-item">
                    <figure>
                        <img src="/asserts/img/products/shoes/3.jpg" alt="">
                        <div class="pi-meta">
                            <div class="pi-m-left">
                                <img src="/asserts/img/icons/eye.png" alt="">
                                <p></p>
                            </div>
                            <div class="pi-m-right">
                                <img src="/asserts/img/icons/heart.png" alt="">
                                <p></p>
                            </div>
                        </div>
                    </figure>
                    <div class="product-info">
                        <h6>PG 4 PCG EP</h6>
                        <p>$120</p>
                        <a th:href="@{addToCart(index=27)}" class="site-btn btn-line">置入购物车</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="product-item">
                    <figure>
                        <img src="/asserts/img/products/shoes/4.jpg" alt="">
                        <div class="bache sale">SALE</div>
                        <div class="pi-meta">
                            <div class="pi-m-left">
                                <img src="/asserts/img/icons/eye.png" alt="">
                                <p></p>
                            </div>
                            <div class="pi-m-right">
                                <img src="/asserts/img/icons/heart.png" alt="">
                                <p></p>
                            </div>
                        </div>
                    </figure>
                    <div class="product-info">
                        <h6>Kyrie 6 EP</h6>
                        <p>$134</p>
                        <a th:href="@{addToCart(index=28)}" class="site-btn btn-line">置入购物车</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="product-item">
                    <figure>
                        <img src="/asserts/img/products/shoes/5.jpg" alt="">
                        <div class="pi-meta">
                            <div class="pi-m-left">
                                <img src="/asserts/img/icons/eye.png" alt="">
                                <p></p>
                            </div>
                            <div class="pi-m-right">
                                <img src="/asserts/img/icons/heart.png" alt="">
                                <p></p>
                            </div>
                        </div>
                    </figure>
                    <div class="product-info">
                        <h6>Nike AlphaDunk EP</h6>
                        <p>$200</p>
                        <a th:href="@{addToCart(index=29)}" class="site-btn btn-line">置入购物车</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="product-item">
                    <figure>
                        <img src="/asserts/img/products/shoes/6.jpg" alt="">
                        <div class="bache">NEW</div>
                        <div class="pi-meta">
                            <div class="pi-m-left">
                                <img src="/asserts/img/icons/eye.png" alt="">
                                <p></p>
                            </div>
                            <div class="pi-m-right">
                                <img src="/asserts/img/icons/heart.png" alt="">
                                <p></p>
                            </div>
                        </div>
                    </figure>
                    <div class="product-info">
                        <h6>Air Jordan XXXIV Low EP PF</h6>
                        <p>$210</p>
                        <a th:href="@{addToCart(index=30)}" class="site-btn btn-line">置入购物车</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="product-item">
                    <figure>
                        <img src="/asserts/img/products/shoes/7.jpg" alt="">
                        <div class="pi-meta">
                            <div class="pi-m-left">
                                <img src="/asserts/img/icons/eye.png" alt="">
                                <p></p>
                            </div>
                            <div class="pi-m-right">
                                <img src="/asserts/img/icons/heart.png" alt="">
                                <p></p>
                            </div>
                        </div>
                    </figure>
                    <div class="product-info">
                        <h6>ADIZERO BOSTON 9 W 跑步运动鞋</h6>
                        <p>$130</p>
                        <a th:href="@{addToCart(index=31)}" class="site-btn btn-line">置入购物车</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="product-item">
                    <figure>
                        <img src="/asserts/img/products/shoes/8.jpg" alt="">
                        <div class="pi-meta">
                            <div class="pi-m-left">
                                <img src="/asserts/img/icons/eye.png" alt="">
                                <p></p>
                            </div>
                            <div class="pi-m-right">
                                <img src="/asserts/img/icons/heart.png" alt="">
                                <p></p>
                            </div>
                        </div>
                    </figure>
                    <div class="product-info">
                        <h6>NITE JOGGER 经典运动鞋</h6>
                        <p>$190</p>
                        <a th:href="@{addToCart(index=32)}" class="site-btn btn-line">置入购物车</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="product-item">
                    <figure>
                        <img src="/asserts/img/products/shoes/9.jpg" alt="">
                        <div class="pi-meta">
                            <div class="pi-m-left">
                                <img src="/asserts/img/icons/eye.png" alt="">
                                <p></p>
                            </div>
                            <div class="pi-m-right">
                                <img src="/asserts/img/icons/heart.png" alt="">
                                <p></p>
                            </div>
                        </div>
                    </figure>
                    <div class="product-info">
                        <h6>ADIDAS NEO BRAVADA 休闲运动鞋</h6>
                        <p>$70</p>
                        <a th:href="@{addToCart(index=33)}" class="site-btn btn-line">置入购物车</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="product-item">
                    <figure>
                        <img src="/asserts/img/products/shoes/10.jpg" alt="">
                        <div class="bache">NEW</div>
                        <div class="pi-meta">
                            <div class="pi-m-left">
                                <img src="/asserts/img/icons/eye.png" alt="">
                                <p></p>
                            </div>
                            <div class="pi-m-right">
                                <img src="/asserts/img/icons/heart.png" alt="">
                                <p></p>
                            </div>
                        </div>
                    </figure>
                    <div class="product-info">
                        <h6>YUNG-1 经典运动鞋</h6>
                        <p>$137</p>
                        <a th:href="@{addToCart(index=34)}" class="site-btn btn-line">置入购物车</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="product-item">
                    <figure>
                        <img src="/asserts/img/products/shoes/11.jpg" alt="">
                        <div class="pi-meta">
                            <div class="pi-m-left">
                                <img src="/asserts/img/icons/eye.png" alt="">
                                <p></p>
                            </div>
                            <div class="pi-m-right">
                                <img src="/asserts/img/icons/heart.png" alt="">
                                <p></p>
                            </div>
                        </div>
                    </figure>
                    <div class="product-info">
                        <h6>3MC X DISNEY SPORT GOOFY DISNEY高飞联名系列经典运动鞋</h6>
                        <p>$100</p>
                        <a th:href="@{addToCart(index=35)}" class="site-btn btn-line">置入购物车</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="product-item">
                    <figure>
                        <img src="/asserts/img/products/shoes/12.jpg" alt="">
                        <div class="pi-meta">
                            <div class="pi-m-left">
                                <img src="/asserts/img/icons/eye.png" alt="">
                                <p></p>
                            </div>
                            <div class="pi-m-right">
                                <img src="/asserts/img/icons/heart.png" alt="">
                                <p></p>
                            </div>
                        </div>
                    </figure>
                    <div class="product-info">
                        <h6>SUPERSTAR W 经典运动鞋</h6>
                        <p>$140  </p>
                        <a th:href="@{addToCart(index=36)}" class="site-btn btn-line">置入购物车</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="site-pagination">
            <span class="active" ></span>
            <a href="categorie">01.</a>
            <a href="other">02.</a>
            <a href="shoe">03.</a>

        </div>
    </div>
</div>
<!-- Page -->


<!-- Footer top section -->
<section class="footer-top-section home-footer">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-8 col-sm-12">
                <div class="footer-widget about-widget">
                    <img src="/asserts/img/logo.png" class="footer-logo" alt="">
                    <p></p>

                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
                <div class="footer-widget">
                    <h6 class="fw-title">友情链接</h6>
                    <ul>
                        <li><a href="#">合作伙伴</a></li>
                        <li><a href="#">博客</a></li>
                        <li><a href="#">支持</a></li>
                        <li><a href="#">使用条款</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
                <div class="footer-widget">
                    <h6 class="fw-title">网站导航</h6>
                    <ul>
                        <li><a href="resign">返回登录</a></li>
                        <li><a href="index">商品首页</a></li>
                        <li><a href="checkout">结账</a></li>
                        <li><a href="categorie">商品总览</a></li>
                        <li><a href="contact">联系我们</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
                <div class="footer-widget">
                    <h6 class="fw-title">运送与退货</h6>
                    <ul>
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#">跟踪订单</a></li>
                        <li><a href="#">退货</a></li>
                        <li><a href="#">运输</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6">
                <div class="footer-widget">
                    <h6 class="fw-title">意见反馈</h6>
                    <div class="text-box">
                        <p>经营人地址 </p>
                        <p>湖南省湘潭市雨湖区湖南科技大学</p>
                        <p>客服电话：18873242003</p>
                        <p>联系邮箱：zty1119094861@sina.com</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Footer top section end -->


<!-- Footer section -->
<footer class="footer-section">
    <div class="container">
        <p class="copyright">
            <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
            Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
            <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
        </p>
    </div>
</footer>
<!-- Footer section end -->


<!--====== Javascripts & Jquery ======-->
<script src="/asserts/js/jquery-3.2.1.min.js"></script>
<script src="/asserts/js/bootstrap.min.js"></script>
<script src="/asserts/js/owl.carousel.min.js"></script>
<script src="/asserts/js/mixitup.min.js"></script>
<script src="/asserts/js/sly.min.js"></script>
<script src="/asserts/js/jquery.nicescroll.min.js"></script>
<script src="/asserts/js/main.js"></script>
</body>
</html>